本文已搬家到筆者自己的部落格嘍，有興趣的可以點這個連結～

前言

在前面的文章提到了 DOM API ，相信大家寫久都會覺得 DOM API 相當的麻煩，希望可以用更簡單的方式進行 DOM 的改寫，今天這篇文章就是要來介紹利用 jQuery 這個 JavaScript 函式庫來進行 DOM 的改寫，而 Codepen 也可以非常快速的新增 jQuery 這個函式庫，只要在 JavaScript 的設定中搜尋 jQuery 即可。

什麼是jQuery

jQuery 是一個 JavaScript 函式庫，其初衷是用來簡化 HTML 與 JavaScript 之間的溝通與操作。

一般來說 jQuery 是利用 $ 開頭來開啟後續的 API 操作，並且透過簡單的 CSS選擇器 來達到存取 DOM 節點 的效果，例如： $('#test') 代表找尋 id 為 test 的元素，是不是相當容易讓人覺得非常好上手呢？這個特點也讓 jQuery 成為目前最受歡迎的 JavaScript 函式庫。

jQuery介紹

jQuery 利用簡單的方式取代原生 DOM API 在改變以及存取節點上的複雜度，而且 jQuery 的使用方法非常簡單，只要會 CSS選擇器 就會 jQuery 了，除此之外 jQuery 還提供了以下幾個特點：

• 更簡單的事件操作

  還記得前面的文章有提到 addEventListener() 嗎？ jQuery 提供了更簡單而且更直觀的方法來綁定事件，在原生的 DOM API 假如我們要為一個元素在 click 事件發生後跳出一個警示視窗寫法如下：

  const element = document.getElementById('test')
  test.addEventListener('click', () => alert('Hello World'), false)
  

  非常的麻煩還要寫兩行程式碼，相較之下 jQuery 就簡單直觀多了，只要寫成這樣就可以：

  $('#test').click(() => alert('Hello World'))
  

• 特效與動畫

  jQuery 提供了一些特效來增加網頁的炫砲程度，不過筆者最常用的就是 .fadeIn() 以及 .fadeOut() 這兩個，當然如果有興趣想要自己設定元素的動畫也可以使用 .animate() 來調整元素的動畫 CSS ，這裡筆者就不加以闡述以免不小心誤人子弟了XD

• AJAX

  AJAX 簡單來說就是前端與後端溝通的橋樑， jQuery 有自己一套 Ajax 的寫法，由於前後端串接會牽扯到非同步所以筆者會在後面的非同步文章再加以闡述 AJAX 的使用方法，這邊就稍微認識一下這個東西即可。

最後來觀念釐清一下兩個最常在頁面讀取後會優先執行的動作 $(document).ready(callback) 以及 DOM API 的 window.onload = callback ，這兩個到底差在哪呢？

• $(document).ready(callback)

  這個是當頁面內的 DOM 都準備好開始讀取就會執行 callback 內的 function ，亦可簡寫成 $(() => {})

• window.onload = callback

  這個是當頁面內的 DOM 已經開始讀取才會執行 callback 內的 function 。

所以可以推想而知 $(document).ready(callback) 會比 window.onload = callback 更早開始執行，正常來說 $(document).ready(callback) 的效能比 window.onload = callback 還要好，尤其是當網頁有非常多張圖片要讀取的情況下，用 window.onload = callback 可能會讓網頁效能變差，畢竟要等圖片都下載完後才開始動作，而 $(document).ready(callback) 只要 DOM 建立好就開始動作了，所以筆者建議還是寫 $(document).ready(callback) 會比較好。

總結

今天稍微介紹一下 jQuery 這個強大的 JavaScript 函式庫，這也是目前寫網頁最多人會用的函式庫，從明天開始的文章會深入探討 jQuery 的相關 API 到時候會用前端來實作 C(Create)R(Read)U(Update)D(Delete) 四個動作，讓大家更了解 jQuery 是如何改變 DOM 上的結構。